import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actions from './redux/actions';
import { ajax } from '@/common/utils';
import { NowList, SoonList } from './'
import { Back,Swiper } from '../common'

export class DefaultPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // 图片列表
      imgList: [],
      nowList: [],
      soonList: []
    }
  }

  static propTypes = {
    actions: PropTypes.object.isRequired,
  };

  render() {
    let { imgList, nowList,soonList } = this.state;
    return (
      <div className="index-default-page bg-gray h100pc">
      {/* 轮播图 */}
        <Swiper imgList={imgList}/>
        { /* 正在播放列表 */}
        <NowList nowList={nowList}/>
        {/*即将播放列表*/}
        <SoonList soonList={soonList} />
        <Back />
      </div>
    );
  }

  componentDidMount() {
    // 请求正在播放的电影列表
    let nowUrl = '/film/now-playing';
    this.getList(nowUrl);

    // 请求即将播放的电影列表
    let soonUrl = '/film/coming-soon';
    this.getList(soonUrl);
  }

  getList(url) {
    let data = {
      page:1,
      count:5
    }
    ajax(url,data,res=> {
      console.log(res);
      if (url === '/film/now-playing') {
        this.setState({
          nowList: res.films
        })
      } else {
        // 把图片提取出来
        let imgList = res.films.map(item=> {
          return item.cover.origin;
        })
         this.setState({
           imgList,
          soonList: res.films
        })
      }
    })
  }
}

/* istanbul ignore next */
function mapStateToProps(state) {
  return {
    index: state.index,
  };
}

/* istanbul ignore next */
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({ ...actions }, dispatch)
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(DefaultPage);
